@charset "utf-8";

* {
	font-family: 'Anton SC';
	font-size: 1.5vw ;
	font-weight: 500;
	/* 1.03em */
}

:root {
	--primary_font: 'Montserrat';
	--primary_clr : #d6c38b;
	--secondary_clr: #0f181d;
	--two_clr : 	#e37f42;
}

.Image {
	border-radius: 50px;
	border-width: 3px;
  	border-color: var(--primary_clr);
  	border-style: solid;
	max-height: 1000px
}

.Button {
	display: inline-block;
	text-align: center;
    background-color: #e37f42;
    font-size: 100%;
    border-radius: 1em;
    text-decoration: none;
    color: var(--secondary_clr);
	padding: 1em;
	width: 8em;
	margin: 2em 2em 2em 0em;
}

.Button:hover {
	background-color: #9A8459;
}

body {
    background-image: url(../FinalAssets/Background.png);
	display: fixed;
    background-position: 0% 0%;
    background-repeat: repeat;
}

p {
	font-family: var(--primary_font);
}

nav {
	display: flex; 
	justify-content: center;
	align-self: center; 
	background: var(--primary_clr); 
	padding: 0px 2vw; 
	border-radius: 2vw;
	max-width: 100vw;
}

.swiggle {
	display:flex; 
	justify-content: center; 
	margin: -1em 0px 1em 0px; 
	font-size: 8em;
	color: var(--primary_clr);
}

.First {
    /* background-color: aqua; */
	width: 100%;
    color: var(--primary_clr);
    border-radius: 0px 0px 0px 0px;
    /* padding:1vw; */
    background-clip: padding-box;
    background-size: auto;
    background-repeat: repeat;
}

.First p {
	font-size: smaller;
}

.layer2{
	/* background-image: url(../test/TestBG2.png); */
	z-index: -1;
}

.First nav header {
	color: var(--secondary_clr)
}

.First nav header img {
	width: 15vw;
	margin: 25px 0px;
}

.FirstCard  {
    width: 50vw;
    background-color: var(--primary_clr);
    color: var(--secondary_clr);
    padding: 1em;
    border-radius: 0vw 2vw 2vw 0px;
    font-family: var(--primary_font);	
	margin: -1vw 2vw 2vw -3vw;
	border: thick;
	border-style: solid;
	/* border-color: rgb(253, 240, 181); */
}



.I_Section {
    display: flex;
	flex-direction: column;
	margin-left: 2vw;
}

.I_Section ul {
	display: flex;
	flex-direction: column; 
	list-style: none; 
	list-style-position: inside; 
	padding: 0px;
}

#Title1 {
	font-family: 'Anton SC'; 
	font-size: 3vw;
	padding: 0px;
	margin: 0px;
	text-transform: capitalize;
}

#Title2 {
	color: #e37f42;
	font-family: 'Anton SC'; 
	font-size: 4vw;
	padding: 0px;
	margin: 0px;
	/* margin-top: -2vw; */
	line-height: 4vw;
	text-transform: capitalize;
}


.sec2var2 {
	/* background-color: aqua; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.sec2var2 h1 {
	font-size: 3em;
	color: var(--two_clr);
}

.sec2var2 h2 {
	font-size: 2em;
}


.sec2leftCard {
	background-color: var(--primary_clr);
	color: var(--secondary_clr);
	padding:0em 3em 0em 1em;
	width: 30vw;
	height:max-content;
	margin-right: 2em;
	border-radius: 0px 0px 30vw 0px;
	
}

.sec2leftCard ul {
	display: flex;
	flex-direction: column; 
	justify-content: space-between;
	list-style: none;
	margin-bottom: 4em;
}
.sec2leftCard ul li {
	font-family: var(--primary_font);
	margin-bottom: 1em;
	font-size: smaller;
}
/* .sec2leftCard li::marker {
	content: "🟆";
} */

#wraptext {
	padding-right: 5em;
}

.sec2rightcard{
	/* background-color: aqua; */
	width: 55vw;
}

.sec2rightcard h1 {
	line-height: 1em;
}

.Second_Cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	text-align: center;
	margin: 0px;
	justify-content: space-between;
	padding: 0px 10px; 
	/* width: 100%; */
}
.Second_Cards h3 {
	font-size: 2vw;
	line-height: 1em;
	background: var(--secondary_clr);
	border-radius: 2vw;
	padding: 1rem;
	margin: 0.1rem;
}
.Second_Cards p {
	/* background-color: aqua; */
	font-family: var(--primary_font);
	color: var(--secondary_clr);
	padding: 0px 1em 0.8em 1em;
	font-size: 1vw;
	margin-right: auto;
}

.Second_Cards div {
	margin-top: 1em;
	background: var(--primary_clr);
	border-radius: 2vw;
	width: 10em;
}


.school {
	/* background-color: aqua; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	/* background-size: auto; */
    background-repeat: repeat;
    /* background-image: url("../FinalAssets/Background.png"); */
	padding-left: 2vw;
	margin: 0vh 0px;;
	width: 98%;
	height:auto;
	overflow-x: hidden;
}
/* 
.schooltitle {
	background-color: aqua;
	border-style: dashed;
	border-width: 3px;
} */

.schooltitle h1 {
	/* background-color: aqua; */
	line-height: 0.1em;
	font-size: 3em;
	color: var(--two_clr);
	/* margin-top: 1em; */
}

.schooltitle h2 {
	/* background-color: aqua; */
	/* margin-top: -100px; */
	line-height: 0.2em;
	font-size: 2em;
	color: var(--primary_clr);
}

#schoolContent {
	font-size: 0.8em;
	font-weight: 400;	
	color: var(--primary_clr);
	margin-right: 4vw;
	width: 50vw;
	
}

/* .school img {
	height: 80vh;
	border-radius: 2vw 2vw 2vw 2vw;
	margin-top: 30vh;
	margin-right: 10vh ;
} */

.carousel-wrapper {
	/* background-color: rgba(0, 255, 255, 0.349); */
	width: 25vw; /* Match your image width */
  	overflow: visible;
  	position: relative;
  	margin-top: 3em;
  	margin-left: 2vw;
	margin-right: 4em;
}


.carousel{
	/* background-color: aqua; */
	position: relative;
	width: 100%;
	height: 100%;
	z-index: -2;

}


.carousel img {
	position: absolute;
	width: 22vw;
	/* height: 100%; */
	/* object-fit: cover; */
	border-radius: 1rem;
	top:10%;
}


.schoollist {
	color: var(--secondary_clr);
	list-style: none;
	display: grid;
	grid-template-columns: 2fr 2fr;
	grid-row-gap: 1em;
	column-gap: 1em;
	text-align: center;
	width: 55vw;
	/* height: max-content; */
	margin-left: 0vw;
	/* margin-right: 2vw; */
}

.schoollist li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--primary_clr);
	border-radius: 1em;
	margin-top: auto;
	/* height: 8em; */
	min-height: 8em;
	padding: 0em 0.5em;
}

.schoollist h3{
	/* background-color: aqua; */
	font-size: larger;
	line-height: 1em;
	/* margin-top: -0.1em; */
}

.schoollist h4{
	font-size: smaller;
	/* margin-top: -1em; */
}


.schoollist p {
	/* background-color: aqua; */
	color: var(--secondary_clr);
	font-size: 0.6em;
	/* margin-top: -2em; */
}
	


























.Sec2Title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.Sec2Title h1 {
	font-size: 120px;
	color: var(--two_clr);
}

.Sec2Title ul {
	width: 120%;
}
.Sec2Title ul li {
	font-size: x-large;
}

.Sec2Title .FirstCard {
	padding: 25px 25px 0.2em 50px; 
	margin-top: -30px; 
	max-width: 50vw;
}

.FirstCard li{
	font-family: var(--primary_font);
	margin-bottom: 2vw;
}




.Categories {
	list-style: none; 
	text-align: left;
	line-height: 0.5vh;;
}

.Categories h3 {
	font-size: 5em;
	color: var(--two_clr);
}

.Categories h4 {
	font-size: 3em;
}

.CCards {
	display: block;
	background-color: var(--primary_clr);
	color: var(--secondary_clr);
	line-height: 1.5em;
	margin: -10px auto;
	padding: 2vw; 
	/* width: 100% ; */
	font-size: smaller;
}

.CategoryCards {
	display: grid;
	grid-template-columns: 2fr 2fr;
	column-gap: 30px;
	grid-row-gap: 30px;
	margin: 0px 15vw;
	align-items: center;
	margin-bottom: 10vh;
}

.CategoryCards li {
	list-style: none;
	background: var(--primary_clr);
	color: var(--secondary_clr);
	border-radius: 30px;
	text-align: center;
	padding: 0.5rem;
	align-items: stretch;
	align-content: space-between
}

.CategoryCards h3 {
	font-size: 2rem;
}

.CategoryCards .ForImage {
    grid-row: span 4;
	/*
    background-image: url(../FinalAssets/School%20Image.png);
    background-repeat: no-repeat;
	background-size: contain; */
}

.CategoryCards .ForImage img {
	width: 100%;
	border-radius: 30px;
}


.pg2Cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
/*	margin-left: 50px;*/
}

.pg2Cards li{
	display: grid;
/*	justify-content: center;*/
	text-align: center;
	align-items: center;
	background: var(--primary_clr);
	color: var(--secondary_clr);
	border-radius: 40px;
	border-width: 3px;
  	border-color: rgb(0, 0, 0);
  	border-style: solid;
  	box-shadow: 6.138px 6.582px 0px 0px rgba(102, 91, 56, 1);
	padding: 0.4em;
	margin-bottom: 1vh;
	width: 30vw;
	height: 50vh;
}

.pg2Cards img {

}

.pg2Cards .ForImage {

}

.pg2Cards li h3 {
	font-size: 40px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 8px;
	line-height: 1em;
}
.pg2Cards li p {
	font-family: var(--primary_font);
	padding: 0px;
	margin: 0px;
	margin-top: -4em;
}

.GameSection {
	display: flex;
	flex-direction: column; 
	align-items: center;
	/* justify-content: center; */
	text-align: center;
}

.Gamesecdiv{
	/* background-color: aqua; */
	border-radius: 2em;
	width: 80vw;
	justify-content: center;
	padding: unset;
	margin-bottom: 3vw;
}

.Gamesecdiv ul {
	margin: auto 0px;
	height: 30vh;
	justify-content: space-evenly;
}

.GameSection h4 {
	all : unset;
	color: var(--two_clr);
	font-size: 4rem;
}

.GameSection iframe {
	border-radius: 1rem; 
	border-color: var(--primary_clr); 
	border-style: solid; 
	border-width: 0.3rem; 
	margin-bottom: 50px;
	width: 50vw;
	height: 30vw;
}



.LastCard {
	margin: 0px auto;
	display: flex; 
	width: 800px;
}

#LastCardImage {
/*    background-image: url(../FinalAssets/Whyhyloveit.png);*/
/*    background-repeat: no-repeat;*/
}

.LastCard img {
	width: 300px;
	margin-right: 30px; 
	margin-top: 4vh;
	border-radius: 30px;
	border: var(--secondary_clr);
	border-style: solid;
	border-width: .3em;
}

.whyStudentList li {
	margin-bottom: 7vh;
}


.LastSection {
	margin: 8vh 0px;
}

.LastSection form {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	margin: auto
}

.LastSection hr {
	border: var(--primary_clr);
	border-style: dotted;
	border-width: 2px;
}


.LastSection .Socials{
	display: flex;
	flex-direction: column;
	justify-content: right;
	align-items: end;
	/* gap: 2vw; */
	/* margin-right: 3vw; */
	line-height: 0.1em;
}

.LastSection .Socials h5 {
	font-size: smaller;
	color: var(--primary_clr);
	font-weight: bolder;
}


.LastSection .Socials a, p  {
	font-size: smaller;
	color: var(--primary_clr);
	text-decoration: none;
	font-family: var(--primary_font);
}






















/*

@media (max-width: 412px) {

	.Button{
		background-color: aqua;
		max-width: 10vw;
		height: auto;
		padding: 1em;
	}

	nav {
		height: 5em;
	}

	.First nav header img {
	width: 15vw;
	margin: 1em 0px;
	justify-content: center;
	}

	.sec2leftCard {
		width: 80vw;
		border-radius: 8vw;
		margin: 0px auto;
		padding: 0vw 5vw;
	}

	.sec2leftCard h2{
		font-size: 3rem;
	}

	.sec2leftCard ul li {
		font-size: 1rem;
	}
	
	.sec2rightcard {
		margin: 0px auto;
		text-align: center;
		width: 80vw;
	}

	.sec2rightcard h1 {
		font-size: 3rem;
	}

	.Second_Cards{
		flex-wrap: unset;
		margin-bottom: 5vh;
	}

	.Second_Cards div{
		width: 15em;
	}

	.Second_Cards p {
		font-size: 1rem;
	}

	.school{
		flex-wrap: nowrap;
	}

};


*/